<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  word: StudentWordItem
  isActive: boolean
  type?: 'card' | 'row'
  opacity?: boolean
  showEnglish?: boolean
}>(), {
  showEnglish: true,
})

// 字体大小策略
function getFontSize(ch: string) {
  const length = ch.length
  if (length > 20) {
    return '30rpx'
  }
  if (length > 10) {
    return '36rpx'
  }
  return '40rpx'
}

const fontSize = computed(() => getFontSize(props.word.ch))
</script>

<template>
  <view
    class="word-card" :class="{
      'active': isActive,
      'word-card--row': type === 'row',

    }"
  >
    <view v-show="showEnglish" class="word-content" :style="{ fontSize }" :class="{ 'word-card--opacity': opacity }">
      {{ word.en }}
    </view>

    <slot name="translation">
      <view class="word-translation ellipsis" :class="{ 'word-card--opacity': opacity }">
        {{ word.cn }}
      </view>
    </slot>
  </view>
</template>

<style lang="scss" scoped>
.word-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  align-items: center;
  flex: 1;
  position: relative;
  cursor: pointer;
  border: 1px solid #f5f5f5;
  display: flex;
  gap: 20rpx;
  justify-content: center;

  &.word-card--row {
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
    gap: 16rpx;

    .word-translation {
      width: 100%;
    }
  }

  &.active {
    background-color: #E9F7F5;
    border: 1px solid $uni-primary;

    .word-content {
      font-weight: bold;
    }
  }

  .word-content {
    color: #333;
  }

  .word-translation {
    font-size: 30rpx;
    color: #333;
  }

  .word-card--opacity {
    opacity: 0;
  }
}
</style>
